<template>
  <div class="security-container">
    <!-- 顶部标题 -->
    <div class="header">
      <h1>信息安全问题处理流程</h1>
      <div class="subtitle">宜宾九阵科技 - 信息安全响应体系</div>
    </div>

    <!-- 流程图主体 -->
    <div class="flowchart">
      <!-- 第一行：客户 -->
      <div class="flow-row">
        <div class="node-group">
          <div class="node client-node">
            <div class="node-icon">
              <i class="el-icon-user-solid"></i>
            </div>
            <div class="node-label">客户</div>
          </div>
          <div class="node action-node">
            <div class="node-label">提出问题</div>
          </div>
          <div class="node client-list">
            <div class="client-item">客户A</div>
            <div class="client-item">客户B</div>
            <div class="client-item">客户C...</div>
          </div>
        </div>
      </div>

      <!-- 连接箭头 -->
      <div class="arrow-down"></div>

      <!-- 第二行：系统管理员 -->
      <div class="flow-row">
        <div class="node-group">
          <div class="node admin-node">
            <div class="node-icon">
              <i class="el-icon-s-custom"></i>
            </div>
            <div class="node-label">系统管理员</div>
          </div>
          <div class="node action-node">
            <div class="node-label">问题分类</div>
          </div>
        </div>
      </div>

      <!-- 连接箭头 -->
      <div class="arrow-down"></div>

      <!-- 第三行：问题分类 -->
      <div class="flow-row multi-column">
        <div class="problem-category">
          <div class="category-node">
            <div class="node-label">一般问题</div>
          </div>
          <div class="arrow-down-small"></div>
          <div class="sub-category">
            <div class="node-label">服务热线直接远程解决</div>
          </div>
        </div>

        <div class="problem-category">
          <div class="category-node">
            <div class="node-label">操作问题</div>
          </div>
          <div class="arrow-down-small"></div>
          <div class="sub-category">
            <div class="node-label">系统管理员操作再培训</div>
          </div>
        </div>

        <div class="problem-category">
          <div class="category-node">
            <div class="node-label">流程问题</div>
          </div>
          <div class="arrow-down-small"></div>
          <div class="sub-category">
            <div class="node-label">系统管理员沟通公司各部门梳理新流程</div>
          </div>
        </div>

        <div class="problem-category">
          <div class="category-node">
            <div class="node-label">环境问题</div>
          </div>
          <div class="arrow-down-small"></div>
          <div class="sub-category">
            <div class="node-label">系统管理员直接解决或者找到IT中心</div>
          </div>
        </div>

        <div class="problem-category">
          <div class="category-node">
            <div class="node-label">新需求</div>
          </div>
          <div class="arrow-down-small"></div>
          <div class="sub-category">
            <div class="node-label">整理需求文档</div>
          </div>
          <div class="arrow-down-small"></div>
          <div class="decision-node">
            <div class="node-label">系统管理员能否自己解决</div>
          </div>
          <div class="branch-container">
            <div class="branch yes-branch">
              <div class="node-label">系统管理员直接解决结束</div>
            </div>
            <div class="branch no-branch">
              <div class="node-label">需要</div>
              <div class="arrow-down-small"></div>
              <div class="sub-category">
                <div class="node-label">提交爱诺斯项目管理系统</div>
              </div>
            </div>
          </div>
        </div>

        <div class="problem-category">
          <div class="category-node">
            <div class="node-label">软件数据问题或软件bug</div>
          </div>
          <div class="arrow-down-small"></div>
          <div class="sub-category">
            <div class="node-label">软件bug处理或版本升级</div>
          </div>
          <div class="arrow-down-small"></div>
          <div class="sub-category">
            <div class="node-label">版本优化迭代</div>
          </div>
          <div class="arrow-down-small"></div>
          <div class="sub-category">
            <div class="node-label">提交爱诺斯项目管理系统</div>
          </div>
        </div>
      </div>

      <!-- 连接箭头 -->
      <div class="arrow-down"></div>

      <!-- 第四行：研发中心 -->
      <div class="flow-row">
        <div class="node-group">
          <div class="node dev-node">
            <div class="node-icon">
              <i class="el-icon-cpu"></i>
            </div>
            <div class="node-label">研发中心</div>
          </div>
          <div class="node action-node">
            <div class="node-label">投产</div>
          </div>
        </div>
      </div>

      <!-- 底部服务通道 -->
      <div class="service-channels">
        <div class="channel">
          <div class="channel-icon">
            <i class="el-icon-phone"></i>
          </div>
          <div class="channel-label">服务热线及电话</div>
        </div>
        <div class="channel">
          <div class="channel-icon">
            <i class="el-icon-warning-outline"></i>
          </div>
          <div class="channel-label">服务投诉</div>
        </div>
        <div class="channel">
          <div class="channel-icon">
            <i class="el-icon-connection"></i>
          </div>
          <div class="channel-label">专线服务通道</div>
        </div>
        <div class="channel">
          <div class="channel-icon">
            <i class="el-icon-s-management"></i>
          </div>
          <div class="channel-label">服务商经理</div>
        </div>
      </div>
    </div>

    <!-- 底部公司标识 -->
    <div class="footer">
      <div class="company-logo">宜宾九阵科技</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Security',
  data() {
    return {
      // 可以添加数据属性
    };
  }
};
</script>

<style lang="less" scoped>
.security-container {
  // min-height: 100vh;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f8ff 100%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;

  .header {
    text-align: center;
    margin-bottom: 30px;
    
    h1 {
      color: #1a6be0;
      font-size: 28px;
      margin-bottom: 10px;
    }
    
    .subtitle {
      color: #666;
      font-size: 16px;
    }
  }

  .flowchart {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .flow-row {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      
      &.multi-column {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        
        .problem-category {
          background: #fff;
          border-radius: 8px;
          padding: 15px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          display: flex;
          flex-direction: column;
          align-items: center;
          
          .category-node, .sub-category, .decision-node {
            background: #f5f7fa;
            border-radius: 6px;
            padding: 10px;
            margin: 5px 0;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
          }
          
          .decision-node {
            background: #e6f7ff;
            border: 1px dashed #1a6be0;
          }
          
          .branch-container {
            display: flex;
            width: 100%;
            justify-content: space-between;
            margin-top: 10px;
            
            .branch {
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              
              &.yes-branch {
                .node-label {
                  background: #f0f9eb;
                  color: #67c23a;
                }
              }
              
              &.no-branch {
                .node-label {
                  background: #fef0f0;
                  color: #f56c6c;
                }
              }
            }
          }
        }
      }
      
      .node-group {
        display: flex;
        align-items: center;
        
        .node {
          margin: 0 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          
          &.client-node, &.admin-node, &.dev-node {
            .node-icon {
              width: 60px;
              height: 60px;
              border-radius: 50%;
              background: linear-gradient(135deg, #1a6be0 0%, #0d4ba3 100%);
              display: flex;
              justify-content: center;
              align-items: center;
              color: #fff;
              font-size: 24px;
              margin-bottom: 8px;
            }
          }
          
          &.action-node {
            background: #fff;
            border-radius: 6px;
            padding: 15px 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }
        }
        
        .client-list {
          display: flex;
          
          .client-item {
            background: #fff;
            border-radius: 4px;
            padding: 8px 12px;
            margin: 0 5px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }

    .arrow-down {
      width: 2px;
      height: 40px;
      background: #1a6be0;
      margin: 10px 0;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid #1a6be0;
      }
    }
    
    .arrow-down-small {
      width: 2px;
      height: 20px;
      background: #1a6be0;
      margin: 5px 0;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #1a6be0;
      }
    }

    .service-channels {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      flex-wrap: wrap;
      
      .channel {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 15px;
        
        .channel-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: linear-gradient(135deg, #1a6be0 0%, #0d4ba3 100%);
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 20px;
          margin-bottom: 8px;
        }
        
        .channel-label {
          font-size: 14px;
          color: #333;
        }
      }
    }
  }

  .footer {
    margin-top: 40px;
    
    .company-logo {
      font-size: 20px;
      font-weight: bold;
      color: #1a6be0;
      text-align: center;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .security-container {
    padding: 15px;
    
    .header {
      h1 {
        font-size: 22px;
      }
    }
    
    .flowchart {
      .flow-row {
        &.multi-column {
          grid-template-columns: 1fr;
        }
      }
      
      .service-channels {
        flex-direction: column;
        align-items: center;
        
        .channel {
          margin: 10px 0;
        }
      }
    }
  }
}
</style>